<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
      *{
      	margin:0;
      	padding: 0;
      	list-style: none;
      }
      .box>input{
      	border: none;
      	background-color: gray;
      	width: 60px;
      	height: 30px;
      	border-radius: 10px;
      	color: #fff;
      }
      .box>.wrapper>div{
      	width: 200px;
      	height: 200px;
      	display: none;
      }
      .wrapper{
      	width: 200px;
      	height: 200px;
      	overflow: hidden;
      	border:1px solid red;
      }
      .box>.wrapper>.active{
      	display: block;
      }
      .btn{
      	background-color: green !important;
      }
	</style>
</head>
<body>
	<div id="box" class="box">
		<input type="button" value="按钮一"  class="btn">
		<input type="button" value="按钮二">
		<input type="button" value="按钮三">
		<div class="wrapper">
			<div class="active">按钮一</div>
			<div>按钮二</div>
			<div>按钮三</div>
		</div>
	</div>
	<script type="text/javascript">
           var inp = document.querySelectorAll("#box>input");
           var subDiv = document.querySelectorAll(".wrapper>div");

           function Div(subDiv,inp){
                this.subDiv = subDiv;
                this.inp = inp;
           }
           Div.prototype.show = function(){
           	for(let j = 0;j<this.inp.length;j++){
           		var sh = this.inp;
           		var oBox = this.subDiv;
           		this.inp[j].onclick = function(){
             	for(let i=0;i<sh.length;i++){
                   sh[i].className = "";
                   oBox[i].className = "";
           	    }
           	    this.className = "btn";
           	    oBox[j].className = "active";
               }
           	} 
           }
           var oDiv = new Div(subDiv,inp);
           oDiv.show();
	</script>
</body>
</html>